<%-- 
    Document   : home
    Created on : 19/09/2013, 21:08:07
    Author     : Bruno
--%>
<%@page import="br.com.redesocial.view.View"%>
<%    
    if(!session.getAttribute("Logado").equals("1")){
        response.sendRedirect("index.jsp");
    }
    
    String NM_Apelido = (String) session.getAttribute("NM_Apelido");
    String NM_Avatar = (session.getAttribute("NM_Avatar")==null)?"images/sem_perfil.jpeg":(String) session.getAttribute("NM_Avatar");
%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link href="resetcss.css" rel="stylesheet"    type="text/css" />
        <link href="style_1.css" rel="stylesheet"    type="text/css" />
        <script type='text/javascript' src='jquery.js'></script>
        <title>Lonely People - Encontre sua cara metade.</title>
    </head>
    <body>      
        <div id="boxGeral">
        <header>
            
            <div id="logo">
                <a href="/LonelyPeople"><img  png="png" id="logo_index" src="images/logo_home.png" alt="Lonely People - Aproximando so Solteiros" /></a>
            </div> <br />
                       
            <div id="boxLogin">                
                <div id="info_user">
                    <img src="<%= NM_Avatar%>" width="60" height="60" border="0" />
                    <ul>
                        <li>Olá, <b><%= NM_Apelido%></b></li>
                        <li><a href="perfil.jsp">Meu perfil</a></li>
                        <li><a href="LonelyPeople?q=logout">Sair</a></li>
                    </ul>                    
                </div>
            </div>
        </header>
                
                        <div id="feeds">
                            <fieldset>
                                <ul id="tab_feed">
                                    <li id="texto" class="ativo">Texto</li>
                                    <li id="foto">Foto</li>
                                    <li id="video">Vídeo(youtube)</li>
                                </ul>
                                <div id="conteudo_texto" class="aba_feed">
                                    <form name="form_new_feed" id="form_new_feed" method="post" action="LonelyPeople">
                                        <input type="hidden" name="q" value="envia_feed" />
                                        <legend>O que está pensando ?</legend>
                                        <textarea name="conteudo" id="conteudo"></textarea>
                                        <input type="button" value="Publicar" id="envia_feed" />
                                    </form>
                                </div>
                                <div id="conteudo_foto" class="aba_feed" style="display:none">
                                    <form name="form_new_feed_foto" id="form_new_feed_foto" method="post" action="LonelyPeople" enctype="multipart/form-data">
                                        <input type="hidden" name="q" value="envia_feed_foto" />
                                        <legend>Escolha sua foto:</legend>
                                        <input type="file" name="foto" id="foto"/>
                                        <input type="submit" value="Publicar" />
                                    </form>
                                </div>
                                <div id="conteudo_video" class="aba_feed" style="display:none">
                                    <form name="form_new_feed_video" id="form_new_feed_video" method="post" action="LonelyPeople">
                                        <input type="hidden" name="q" value="envia_feed_video" />
                                        <legend>ID Video Youtube</legend>
                                        <input type="text" name="video" id="video" />
                                        <input type="button" value="Publicar" id="envia_feed_video" />
                                    </form>
                                </div>
                            </fieldset>
                            
                            <div id="ultimos_feeds">
                                <div class="carregando" id="carregando_feed">
                                    <img src="images/carregando.gif" /><br>
                                    <span>Carregando...</span>
                                </div>                                
                                <ul></ul>
                            </div>
                        </div>
                        <div id="amigos">
                            <h3>Amigos</h3>
                            <div>
                                <form name="form_busca_amigo" id="form_busca_amigo" method="post" action="busca_amigo.jsp">
                                    <input type="text" name="amigo" id="amigo" placeholder="Procure seus amigos" />
                                    <input type="submit" value="Pesquisar" />
                                </form>
                            </div>
                            <div class="carregando" id="carregando_amigo">
                                <img src="images/carregando.gif" /><br>
                                <span>Carregando...</span>
                            </div>                                
                            <ul></ul>                            
                        </div>
                
        </div>
                
                
        <footer>
            <div class="container">
                Todos os direitos reservados.
            </div>           
        </footer>
       <script type="text/javascript">
        var ultimos_feeds;
        
        function ListaFeeds(){
            $.post("/LonelyPeople/LonelyPeople?q=lista_feeds", function(retorno){
                $("#carregando_feed").hide();
                $("#ultimos_feeds ul").fadeOut("slow", function(){
                    $("#ultimos_feeds ul").html(retorno);
                    $("#ultimos_feeds ul").fadeIn("slow");
                    clearInterval(ultimos_feeds);
                    ultimos_feeds = setInterval(function(){
                        ListaFeeds();
                    }, 30000);
                });
            });
        }        
        ListaFeeds();
        
        function AceitarAmigo(amigo){
            $.post("/LonelyPeople/LonelyPeople?q=aceitar_amigos&id_amigo="+amigo.id, function(retorno){
                $(amigo).val("Aceite realizado");
                setTimeout(function(){
                    $(amigo).val("Conversar").removeClass("aceitar");
                },2000);
            });          
        }
        
        $(document).ready(function(){            
            // Carrega amigos    
            $.post("/LonelyPeople/LonelyPeople?q=lista_amigos", function(retorno){
                $("#carregando_amigo").hide();
                $("#amigos ul").fadeOut("slow", function(){
                    $("#amigos ul").html(retorno);
                    $("#amigos ul").fadeIn("slow");
                });
            });
            
            // Envia novo Feed
            $("#envia_feed").click(function(){
                $(this).val('Carregando...');
                $.post("/LonelyPeople/LonelyPeople", $("#form_new_feed").serialize(), function(retorno){
                    $("#conteudo").val("");
                    $("#envia_feed").val('Publicar');
                    clearInterval(ultimos_feeds);
                    ListaFeeds();
                });
            });
            
            $("#envia_feed_video").click(function(){
                $(this).val('Carregando...');
                $.post("/LonelyPeople/LonelyPeople", $("#form_new_feed_video").serialize(), function(retorno){
                    $("#video").val("");
                    $("#envia_feed_video").val('Publicar');
                    clearInterval(ultimos_feeds);
                    ListaFeeds();
                });
            });            
            
            $("#tab_feed li").click(function(){
                $("#tab_feed li").removeClass("ativo");
                $(this).addClass("ativo");
                $(".aba_feed").hide();
                $("#conteudo_"+$(this).attr("id")).show();
            });
        });
    </script>
    </body>
    
</html>